<template>
  <a-drawer
    :title="formInfo.id == undefined ? '新增区域' : '修改区域'"
    :maskClosable="true"
    width="600"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :destroyOnClose="true"
    :visible="visible"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model
        ref="ruleForm"
        :model="formInfo"
        :label-col="$global.labelCol"
        :wrapper-col="$global.wrapperCol"
      >
        <a-row>
          <a-col>
            <a-form-model-item
              label="区域名称"
              prop="campusName"
              :rules="$valid.required"
              :maxLength="50"
            >
              <a-input
                v-model="formInfo.campusName"
                placeholder="请输入院区名称"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col>
            <a-form-model-item
              label="使用面积（㎡）"
              prop="usableArea"
              :maxLength="50"
            >
              <a-input
                v-model="formInfo.usableArea"
                placeholder="请输入使用面积（㎡）"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col>
            <a-form-model-item
              label="所在位置"
              prop="campusAddress"
              :maxLength="50"
            >
              <a-input
                v-model="formInfo.campusAddress"
                placeholder="请输入详细地址"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col>
            <a-form-model-item label="介绍" prop="introduce" :maxLength="50">
              <a-input
                type="textarea"
                :row="4"
                v-model="formInfo.introduce"
                placeholder="请输入"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row style="margin-top: 20px">
          <a-col>
            <a-form-model-item label="图片" prop="pictureImage" :maxLength="50">
              <w-image-upload
                class="avatar-uploader"
                text="上传"
                :multipleFlag="false"
                :file-max-size="1"
                v-model="formInfo.pictureImage"
                bizPath="companyPic"
              ></w-image-upload>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row style="margin-top: 20px">
          <a-col>
            <a-form-model-item label="附件" prop="enclosure" :maxLength="50">
              <w-file-upload
                class="avatar-uploader"
                text="上传"
                :pdfOnly="true"
                :multipleFlag="true"
                v-model="formInfo.enclosure"
                bizPath="annexUrl"
              >
              </w-file-upload>
            </a-form-model-item>
          </a-col>
        </a-row>
        <div
          style="
            display: flex;
            justify-content: flex-end; /* 将内容推到右侧 */
            align-items: flex-end; /* 将内容推到下方 */
            height: 200vh; /* 容器高度设为视口高度，确保它在屏幕底部 */
          "
        >
          <a-button @click="handleCancel" style="margin-right: 0.8rem"
            >取消</a-button
          >
          <a-button
            style="margin-right: 0.8rem"
            @click="handleSubmit"
            type="primary"
            :loading="confirmLoading"
            >保存</a-button
          >
        </div>
      </a-form-model>
    </a-spin>
  </a-drawer>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import WImageUpload from '@/components/WxImageUpload/WImageUpload'
import WFileUpload from '@/components/WxFileUpload/WFileUpload.vue'
export default {
  name: 'DevCampusAreaEdit',
  components: {
    WImageUpload,
    WFileUpload,
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      formInfo: {
        createTime: undefined,
        campusName: undefined,
        usableArea: undefined,
        campusAddress: undefined,
        introduce: undefined,
        pictureImage: undefined,
        enclosure: undefined,
        wx: '',
      },
      url: {
        saveInfo: '/system/devCampusArea/save',
        getInfo: '/system/devCampusArea/info',
      },
    }
  },
  created() {},
  methods: {
    add() {
      this.edit()
    },
    edit(record) {
      this.$objToOverride(this.formInfo, record)
      if (this.formInfo.id) {
        getAction(this.url.getInfo, { id: record.id }).then((res) => {
          this.$nextTick(() => {
            this.formInfo = res.result.data
          })
        })
      }
      this.visible = true
    },
    // 确定
    handleSubmit() {
      // 触发表单验证
      this.confirmLoading = true
      this.$refs.ruleForm.validate((valid) => {
        console.log(valid)
        if (valid) {
          postAction(this.url.saveInfo, this.formInfo)
            .then((res) => {
              this.$message.success(res.content)
              this.$emit('ok', this.formInfo)
              this.close()
            })
            .finally(() => {
              this.confirmLoading = false
            })
        } else {
          this.confirmLoading = false
        }
      })
    },
    // 关闭
    handleCancel() {
      this.close()
    },
    close() {
      this.$refs.ruleForm.resetFields()
      this.$objToReset(this.formInfo)
      this.$emit('close')
      this.visible = false
    },
    editorOk(val) {
      this.formInfo.content = val
    },
  },
}
</script>
